<template>
  <div class="index-container">
    <el-carousel
      ref="carousel"
      :height="carousel_height"
      direction="horizontal"
      :autoplay="false"
      :initial-index="currentIndex"
      arrow="never"
      trigger="click"
      :loop="false"
      @change="swiperChange"
    >
      <el-carousel-item v-for="(item, index) in sliders" :key="index">
        <div class="index-body">
          <img class="index-img" :src="item.img" alt="" />
          <div class="index-content" :class="isHover ? 'bg0' : 'bg5'">
            <div class="center-container" v-if="item.type == 1">
              <div
                class="center-text"
                :class="{ active: currentIndex == index }"
              >
                <div class="index-title">{{ item.title }}</div>
                <div class="index-subtitle">
                  {{ item.subTitle }}
                </div>
              </div>
              <div
                class="index-info"
                :class="{ active: currentIndex == index }"
                v-html="item.describe"
              ></div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- 公共用 按钮 -->
    <div class="menu">
      <div class="hamburger menu" @click="clickMenu">
        <div class="bar" :class="menuClicked ? 'animate' : ''"></div>
      </div>
      <div class="uvnav down" v-if="device == 'pc'" @click="next"></div>
      <div class="uvnav up" v-if="device == 'pc'" @click="prev"></div>
      <div class="uvnav down" v-if="device == 'mobile'" @click="next">
        <div class="text-uvnav">PROFILE</div>
        <div class="direction"><i class="el-icon-arrow-left"></i></div>
      </div>
      <div class="uvnav up" v-if="device == 'mobile'" @click="prev">
        <div class="direction"><i class="el-icon-arrow-right"></i></div>
        <div class="text-uvnav bgb">ORDER</div>
      </div>
      <a id="mainlogo" href="#" v-if="currentIndex == 0 && device == 'pc'"
        ><img src="../static/slider/logo2.png" />
      </a>
      <!-- <a id="mainlogo" href="#" v-if="currentIndex == 0 && device == 'mobile'"
        ><img src="../static/slider/indexLogo.png" />
      </a> -->
      <a class="cnav tr gohome" href="#" style="" v-if="menuClicked">GO BACK</a>
      <a
        class="cnav tr gohome"
        style="cursor: pointer"
        @click="toLogin"
        v-if="!menuClicked && !isLogin"
        >LOG IN</a
      >
      <a
        class="cnav tr login-text"
        @click="toPerson"
        v-if="!menuClicked && isLogin"
      >
        <div>{{ userInfo.nickName }}</div>
        <img src="../static/slider/avatar.png" alt="" />
      </a>
      <a class="cnav bl contact zt-more" href="#" v-if="device == 'pc'"
        >CONTACT</a
      >
      <a class="cnav br awards zt-more" href="#" v-if="device == 'pc'"
        >AWARDS</a
      >
      <a class="cnav bl contact zt-more" href="#" v-if="device == 'mobile'"
        ><i class="el-icon-arrow-left"></i
      ></a>
      <a class="cnav br awards zt-more" href="#" v-if="device == 'mobile'"
        ><img src="../static/slider/rightLogo.png" alt=""
      /></a>
      <div
        class="popup-box"
        :class="{ menuActive: menuClicked }"
        ref="popup_box"
      >
        <div class="popup-body" v-if="menuClicked">
          <div>FOOD</div>
          <div @click="gotoMenu">MENU</div>
          <div>CHEF</div>
          <div>PLACE</div>
          <div>STORY</div>
          <div>BOOKINGS</div>
          <div>EVENTS</div>
        </div>
        <div class="concat-box" v-if="menuClicked">
          <div class="concat-img">
            <div class="F1"></div>
            <div class="W1"></div>
            <div class="Y1"></div>
          </div>
          <div class="concat-text">
            PRESS ACCESS DUAL BY FIT ISLAND PORTFOLIO
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  name: "DualInfo",
  data() {
    return {
      menuClicked: false,
      sliders: [],
      currentIndex: 0,
      carousel_height: "100%",
      flag: true,
      isHover: false,
      isChange: true,
      isLogin: false,
      userInfo: {},
      device: "",
      timer: null,
      isScrolling: false,
    };
  },
  created() {
    this.device = localStorage.getItem("device");
    this.checkedLoginStatus();
  },
  mounted() {
    this.isDevice();
  },
  methods: {
    // 滑动
    handleTouchStart(event) {
      // 记录初始位置信息
      this.initialX = event.changedTouches[0].clientX;
      this.initialY = event.changedTouches[0].clientY;

      // 开始计时器
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        if (
          (this.isScrolling === false && Math.abs(this.deltaX) > 15) ||
          Math.abs(this.deltaY) > 15
        ) {
          this.isScrolling = true;
        } else {
          // 点击操作或者非滚动行为
        }
      }, 250);
    },
    handleTouchMove(event) {
      const currentX = event.changedTouches[0].clientX;
      const currentY = event.changedTouches[0].clientY;

      // 计算水平和垂直方向上的变化量
      this.deltaX = currentX - this.initialX;
      this.deltaY = currentY - this.initialY;

      // 判断是否正在进行滑动操作
      if (!this.isScrolling) return;

      // 根据滑动方向执行相应逻辑
      if (Math.abs(this.deltaX) >= Math.abs(this.deltaY)) {
        // 左右滑动

        if (this.deltaX > 0) {
          // 向右滑动
          this.prev();
        } else {
          // 向左滑动
          this.next();
        }
        clearTimeout(this.timer);
      } else {
        // 上下滑动

        if (this.deltaY > 0) {
          // 向下滑动
        } else {
          // 向上滑动
        }
        clearTimeout(this.timer);
      }
    },
    handleTouchEnd() {
      // 结束计时器（如果存在）
      clearTimeout(this.timer);
    },
    isDevice() {
      if (this.device == "pc") {
        this.sliders = [
          {
            img: require("../static/slider/information.jpg"),
            type: 1,
            title: "Indulge in Health",
            subTitle: "Embrace Wellness",
            describe: `<div style="font-size: 18px">OUR FOOD</div>
                  <div style="margin-bottom: 30px">
                    Carefully selected premium ingredients. cooked to perfection
                    for exquisite flavors.<br />Personalized customization,
                    balanced nutritional arrangements.
                  </div>
                  <div style="font-size: 18px">OUR SERVICES</div>
                  <div>
                    Personalized fitness plans, a variety of fitness program courses,,private parties<br/>providing a platform for interactive communication
                  </div>`,
          },
        ];
      } else {
        this.sliders = [
          {
            img: require("../static/slider/mInfoBg.jpg"),
            type: 1,
            title: "Indulge in Health",
            subTitle: "Embrace Wellness",
            describe: `<div style="font-size: 18px">OUR FOOD</div>
                  <div style="margin-bottom: 30px">
                    Carefully selected premium ingredients. cooked to perfection
                    for exquisite flavors.<br />Personalized customization,
                    balanced nutritional arrangements.
                  </div>
                  <div style="font-size: 18px">OUR SERVICES</div>
                  <div>
                    Personalized fitness plans, a variety of fitness program courses,,private parties<br/>providing a platform for interactive communication
                  </div>`,
          },
        ];
      }
    },
    checkedLoginStatus() {
      if (this.$user.getToken()) {
        this.isLogin = true;
        this.userInfo = JSON.parse(this.$user.getUserInfo());
      }
    },
    toPerson() {
      this.$router.push({
        name: "PersonCenter",
      });
    },
    toLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    toBooking() {
      this.$router.push({
        name: "Booking",
      });
    },
    gotoMenu() {
      this.$router.push({
        name: "MENU",
      });
    },
    gotoPred() {
      this.$router.push({
        name: "Predetermine",
      });
    },
    gotoBooking() {
      this.$router.push({
        name: "Booking",
      });
    },

    clickMenu() {
      if (!this.menuClicked) {
        console.log(this.menuClicked, "this.menuClicked");
        this.$refs.popup_box.style.zIndex = 888;
        this.$refs.popup_box.style.width = "100vw";
      } else {
        this.$refs.popup_box.style.width = 0;
      }
      this.menuClicked = !this.menuClicked;
    },
    swiperChange(val) {
      // console.log(ysliders);
      this.currentIndex = val;
    },
    hoverText() {
      this.isHover = true;
    },
    outText() {
      this.isHover = false;
    },
    async prev() {
      // if (this.currentIndex == 0) {
      this.$router.push({
        name: "MENU",
      });
      return;
      // }

      // await this.$nextTick();

      // await this.$refs.carousel.prev();
    },
    async next() {
      // if (this.currentIndex == 1) {
      this.$router.push({
        name: "Index",
      });
      // }
      // await this.$nextTick();
      // this.$refs.carousel.next();
    },
    handleScroll(m) {
      let that = this;
      if (that.flag) {
        that.flag = false;
        if (m.deltaY > 0) {
          this.$refs.carousel.next();
        } else {
          this.$refs.carousel.prev();
        }
      }
      setTimeout(() => {
        that.flag = true;
      }, 2000);
    },

    debounce(fn, delay) {
      let timer = null;
      return function () {
        let that = this;
        let args = arguments;
        if (timer) clearTimeout(timer);
        timer = setTimeout(function () {
          fn.apply(that, args);
        }, delay);
      };
    },
  },
  // mounted() {
  //   setTimeout(() => {
  //     this.isChange = false;
  //   }, 5000);

  // },
  computed: {},
};
</script>
  
  <style lang="scss" scoped>
@import url(../common/pageStyle/dualInfo/mobile.scss) (max-width: 768px);
@import url(../common/pageStyle/dualInfo/pc.scss) (min-width: 768px);
</style>